<template>
	<div class="index_section">
		<sw-carousel height="25%" :data="bannerData"></sw-carousel>
		<!-- <el-carousel height="100%">
				<el-carousel-item v-for="(item, index) in bannerData" :key="index"><img :src="item.imgsrc" alt="" /></el-carousel-item>
			</el-carousel> -->
		<type-number class="wrapper"></type-number>
		<div class="front_index_resource">
			<content-box class="wrapper" title="最新资源" icon-text="New" icon-color="#efb04f" to="/front/resource">
				<el-row :gutter="24" class="front_newest_resource">
					<el-col v-for="(item, index) in resourceData" :key="index" :span="index === 0 ? 12 : 6">
						<dl @click="handlerToDetail(item.id)">
							<dt :class="item.showType | resTypeFilter">
								<img :src="item.coverAddr || showDefaultImage" :alt="item.zjName" />
							</dt>
							<dd class="tit">{{ item.zjName }}</dd>
							<dd class="btn" v-if="index === 0"><el-button size="small">查看资源</el-button></dd>
							<dd class="info">
								<span>{{ item.createName }}</span>
								<span>{{ item.createTime }}</span>
								<span class="el-icon-view">{{ item.browseCount || 0 }}</span>
							</dd>
						</dl>
					</el-col>
				</el-row>
			</content-box>
		</div>
	</div>
</template>

<script>
import contentBox from './content';
import typeNumber from './typeNumber';
import { mapGetters, mapActions } from 'vuex';
import { getBannerList, getResourceList, getResourceStat } from '@/api/openApi';
export default {
	components: { contentBox, typeNumber },
	data() {
		return {
			loading: false,
			bannerData: [],
			resourceData: []
		};
	},
	computed: {
		...mapGetters(['siteInfoData']),
		isLogin() {
			return this.$local.get('token');
		},
		showDefaultImage() {
			return async () => {
				let defaultImage = await this.getFileUrl(this.siteInfoData.field3);
				return defaultImage;
			}
		}
	},
	filters: {
		resTypeFilter(input) {
			switch(input) {
			case '1':
				return 'image';
				break;
			case '2':
				return 'audio';
				break;
			case '3':
				return 'video';
				break;
			case '4':
				return 'document';
				break;
			default:
				return 'other';
				break;
			}
		}
	},
	mounted() {
		this.getIndexBannerData();
		this.getResListNoLogin();
	},
	methods: {
		...mapActions(['getFileUrl']),

		//获取首页BANNER图
		async getIndexBannerData() {
			let params = { page: 1, limit: 4, code: '1', del: '1' };
			let result = await getBannerList(params).then(res => res.data);
			if(result.code === '0') {
				let datas = !result.data ? [] : result.data;
				let filePromise = datas.map(item => this.getFileUrl(item.attachmentId));
				Promise.all(filePromise).then(res => {
					this.bannerData = datas.map((item, index) => {
						return { ...item, imgsrc: res[index] };
					});
				});
			}
		},

		//不登录获取资源资源列表
		async getResListNoLogin() {
			let params = { page: 1, limit: 5, auditStatus: 1, del: 1, isMine: 6, dataResult: 1 };
			let result = await getResourceList(params).then(res => res.data);
			if(result.code === '0') {
				/* let datas = !result.data ? [] : result.data;
				this.resourceData = datas.map((item) => {
					let obj = { ...item };
					if()
					console.log(!obj.coverAddr);
					return { ...item };
				}); */
				this.resourceData = !result.data ? [] : result.data;
			}
		},

		handleTabChange(v) {
			this.currTab = v;
		},
		handleSubmitSearch() {
			this.$router.push({
				path: '/search',
				query: { keyword: this.searchWord }
			});
		},

		//去详情
		handlerToDetail(id) {
			// if (!this.isLogin) return false;
			this.$router.push({
				path: '/front/resource/' + id
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.front_index_resource {
	margin-top: 40px;
}

.front_newest_resource {
	margin-top: 40px;
	padding-bottom: 40px;

	.el-col {
		margin-bottom: 24px;

		&:nth-child(1) {
			dl {
				dd.tit {
					margin: 24px;
				}

				dd.btn {
					padding: 0 24px 46px;
				}

				dd.info {
					padding: 0 24px 24px;
				}
			}
		}
	}

	dl {
		border-radius: 8px;
		background-color: #fff;
		overflow: hidden;
		cursor: pointer;
		transition: box-shadow 0.15s linear;

		&:hover {
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
		}
	}

	dt {
		position: relative;
		padding-top: 56.25%;

		img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		&::before {
			position: absolute;
			width: 62px;
			height: 26px;
			left: 0;
			bottom: 0;
			content: '';
			border-radius: 0 8px 0 0;
			background-image: url('../../../assets/img/resTypeImage.png');
			background-repeat: no-repeat;
			background-size: 100%;
			z-index: 2;
		}

		&.image::before {
			background-position: 0 0;
			background-color: #6ccec7;
		}

		&.audio::before {
			background-position: 0 -26px;
			background-color: #60c1e9;
		}

		&.video::before {
			background-position: 0 -52px;
			background-color: #ee518c;
		}

		&.document::before {
			background-position: 0 -78px;
			background-color: #ec7b7b;
		}

		&.other::before {
			background-position: 0 -106px;
			background-color: #f1b656;
		}
	}

	dd.tit {
		font-size: 16px;
		height: 24px;
		line-height: 24px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin: 16px;
	}

	dd.btn {
		padding: 0 16px 16px;
	}

	dd.info {
		display: flex;
		align-items: center;
		padding: 0 16px 16px;
		color: #999;

		span {
			margin-left: 20px;

			&:nth-child(1) {
				margin-left: 0;
			}

			&:nth-child(2) {
				flex: 1;
			}

			&::before {
				margin-right: 6px;
			}
		}
	}
}
</style>